<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menu {
            position: relative;
            width: 200px;
            height: auto;
        }
        .menu-item {
            position: relative;
            width: 100%;
            height: 50px;
            outline: 1px solid red;
            text-align: center;
            line-height: 50px;
            font-size: 24px;
        }
        .menu-item:hover {
            background-color: #eee;
            cursor: pointer;
        }
        .menu-item:hover>.sub-menu {
            display: block;
        }
        .menu-item>.sub-menu {
            position: absolute;
            left: 200px;
            top: 0;
            display: none;
            width: 200px;
            height: auto;
        }

    </style>
</head>
<body>
    <!-- <div class="menu">
        <div class="menu-item">1</div>
        <div class="menu-item">2</div>
        <div class="menu-item">3</div>
        <div class="menu-item">
            4 >
            <div class="sub-menu">
                <div class="menu-item">4-1</div>
                <div class="menu-item">4-2</div>
                <div class="menu-item">4-3</div>
            </div>
        </div>
    </div> -->

    <script src="./jq/jq.js"></script>
    <script>
        const menuInfo = [
            {
                label: '1',
            },
            {
                label: '2',
            },
            {
                label: '3',
            },
            {
                label: '4',
                subMenu: [
                    {
                        label: '4-1',
                    },
                    {
                        label: '4-2',
                    },
                    {
                        label: '4-3',
                        subMenu: [
                            {
                                label: '4-3-1',
                            },
                            {
                                label: '4-3-2',
                            },
                            {
                                label: '4-3-3',
                            },
                        ],
                    },
                ],
            },
        ];

        function createMenu (info, isFirst) {
            const menu = $(`<div class="${ isFirst ? 'menu' : 'sub-menu' }"></div>`);
            for (const item of info) {
                const menuItem = $(`<div class="menu-item">${ item.label }</div>`);
                if (item.subMenu) {
                    menuItem.text(item.label + ' >');
                    const subMenu = createMenu(item.subMenu, false);
                    menuItem.append(subMenu);
                }
                menu.append(menuItem);
            }
            return menu;
        }

        const menu = createMenu(menuInfo, true);
        $('body').append(menu);

    </script>
</body>
</html>